<template>
  <div class="box">
    <div class="box-title">考试安排</div>
    <div class="box-data">
      <div class="add-button" @click="toAdd()">+ 新建考试</div>
      <div class="box-table">
        <div class="box-table-title">
          <div v-for="(titleText, index) in titleList" :key="index">{{ titleText }}</div>
        </div>
        <div v-for="(dataText, index) in dataList" :key="index" class="box-table-data">
          <div>{{ dataText.id }}</div>
          <div>{{ dataText.status }}</div>
          <div>{{ dataText.name }}</div>
          <div>{{ dataText.paper }}</div>
          <div>{{ dataText.date }}</div>
          <div>{{ dataText.time }}</div>
          <div>{{ dataText.long }}</div>
          <div class="box-table-button">
            <span @click="dialogVisible = true">预览</span>
            <span>修改</span>
          </div>
        </div>
      </div>
      <el-dialog title="考试信息" v-model="dialogVisible" width="40%" :before-close="handleClose">
        <div class="dialog-title">考试安排基本信息</div>
        <div class="dialog-data"  v-for="(examination, index) in examinationList">
          <div>
            <div class="dialog-text">
              <span>考试名称：</span>
              <span>{{ examination.name }}</span>
            </div>
            <div class="dialog-text1">
              <span>考试时长：</span>
              <span>{{ examination.long }}</span>
            </div>
          </div>
          <div>
            <div class="dialog-text">
              <span>考试日期：</span>
              <span>{{ examination.date }}</span>
            </div>
            <div class="dialog-text1">
              <span>开考时间：</span>
              <span>{{ examination.newTime }}</span>
            </div>
          </div>
          <div>
            <div class="dialog-text">
              <span>结束时间：</span>
              <span>{{ examination.endTime }}</span>
            </div>
            <div class="dialog-text1">
              <span>使用试卷：</span>
              <span>{{ examination.paper }}</span>
            </div>
          </div>
        </div>

        <div class="dialog-title1">考试对象相关信息</div>
        <div id="dialog-data" class="dialog-data" v-for="(object, index) in objectList">
          <div class="dialog-text2">
            <span>考试场地：</span>
            <span>{{ object.address }}</span>
          </div>

          <div class="dialog-text2">
            <span>参考班级：</span>
            <span>{{ object.class }}</span>
          </div>

          <div class="dialog-text2">
            <span>不考试人员：</span>
            <span>{{ object.staff }}</span>
          </div>

          <div class="dialog-text2">
            <span>监考老师：</span>
            <span>{{ object.invigilate }}</span>
          </div>

        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确认</el-button>
          </span>
        </template>
      </el-dialog>
      <div class="text">共{{ num }}条考试信息</div>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="30">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 路由全局实例
const route = useRoute();
const router = useRouter();

const dialogVisible = ref(false);

const titleList = ref(['序号', '考试状态', '考试名称', '使用试卷', '考试日期', '考试时间', '考试时长（min）', '操作']);
const dataList = ref([
  { id: 1, status: '考试中', name: '2017年第一次月考', paper: '试卷1', date: '2018.09.02', time: '11:30~13:00', long: '30' },
  { id: 2, status: '待考', name: '2017年第一次月考', paper: '试卷2', date: '2018.09.02', time: '11:30~13:00', long: '30' },
  { id: 3, status: '待考', name: '2017年第一次月考', paper: '试卷3', date: '2018.09.02', time: '11:30~13:00', long: '30' },
  { id: 4, status: '已完成', name: '2017年第一次月考', paper: '试卷4', date: '2018.09.02', time: '11:30~13:00', long: '30' },
  { id: 5, status: '已完成', name: '2017年第一次月考', paper: '试卷5', date: '2018.09.02', time: '11:30~13:00', long: '30' }
]);

const examinationList = ref([
  { id: 1, name: '2017年第一次月考', long: '30分钟', date: '2018-03-04', newTime: '11:30', endTime: '13:30', paper: '试卷1' }
]);

const objectList = ref([
  { id: 1, address: '教学楼A座101', class: '网信01班、网信02班、网信03班、网信04班', staff: '张三、李四、王五、陶柳', invigilate: '张三、李四'}
]);

const num = ref(58);

const toAdd = () => {
  router.push('/add');
}
</script>

<style scoped>
.box {
  width: device-width;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.box-title {
  font-weight: 700;
  font-size: 20px;
  color: #666666;
  line-height: 24px;
  margin: 10px;
}

.box-data {
  width: 90%;
  margin: auto;
  margin-top: 80px;
}

.add-button {
  width: 106px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #666666;
  font-size: 16px;
  font-weight: 700;
  background: url("https://img.axureshop.com/1b/91/9d/1b919dca1aa14201b597401657ba6197/images/%E8%AF%95%E5%8D%B7/u4947.svg") no-repeat;
  background-size: cover;
  margin-bottom: 10px;
  cursor: pointer;
}

.box-table {
  display: flex;
  flex-direction: column;
}

.box-table-title,
.box-table-data {
  width: 100%;
  height: 74px;
  margin: auto;
  line-height: 74px;
  display: flex;
  font-weight: 700;
  font-size: 16px;
  color: #666666;
  background: url("https://img.axureshop.com/1b/91/9d/1b919dca1aa14201b597401657ba6197/images/试卷/u4899.png") no-repeat;
  background-size: cover;
}

.box-table-title>div,
.box-table-data>div {
  width: 12.5%;
  text-align: center;
  border: 1px solid #E5E5E5;
}

.box-table-title>div:nth-child(1),
.box-table-data>div:nth-child(1) {
  width: 5%;
}

.box-table-title>div:nth-child(2),
.box-table-data>div:nth-child(2) {
  width: 10%;
}

.box-table-title>div:nth-child(3),
.box-table-title>div:nth-child(4),
.box-table-data>div:nth-child(3),
.box-table-data>div:nth-child(4) {
  width: 17.5%;
}

.box-table-data {
  font-weight: 400;
  background: #FFFFFF;
}

.box-table-button {
  font-weight: 400;
  font-size: 16px;
  color: #108EE9;
}

.box-table-button>span {
  height: 16px;
  line-height: 16px;
  padding: 0 10px;
  cursor: pointer;
}

.box-table-button>span:nth-child(1) {
  border-right: 1.5px solid #108EE9;
}

.text {
  font-size: 14px;
  color: #666666;
  margin-top: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
}

.dialog-data {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.dialog-data>div {
  display: flex;
  margin: 10px 0;
  color: #333333;
  font-size: 16px;
}

.dialog-text ,.dialog-text2 {
  width: 300px;
  display: flex;
}

.dialog-text>span:nth-child(1),
.dialog-text1>span:nth-child(1),
.dialog-text2>span:nth-child(1) {
  font-weight: bold;
}

.dialog-title,
.dialog-title1   {
  font-size: 14px;
  width: 90%;
  margin: auto;
  border-bottom: 1px solid #E5E5E5;
  color: #333333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.dialog-title1 {
  margin-top: 35px;
}

.dialog-text2 {
  width: 90%;
}

#dialog-data {
  margin-bottom: 50px;
}
</style>